<template>
  <van-nav-bar title="登录" />
  <van-form @submit="loginCheck">
    <van-field
      v-model="username"
      name="loginname"
      label="手机号"
      placeholder="手机号"
      required
      :rules="usernameRule"
    />
    <van-field
      v-model="password"
      :type="passtype"
      name="password"
      label="密码"
      placeholder="密码"
      required
      :right-icon="eyeicon"
      :rules="[{ required: true, message: '请填写密码' }]"
      @click-right-icon="showPass"
    />
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        登录
      </van-button>
    </div>
  </van-form>
  <p @click="goReg" class="gologin">还没有账号去注册</p>
</template>
    
    <script>
import { showFailToast } from "vant";

export default {
  name: "Login",
  data() {
    return {
      eyeicon: "closed-eye",
      passtype: "password",
      password: "",
      usernameRule: [
        {
          required: true,
          message: "请输入手机号",
        },
      ],
      username: "",
    };
  },
  methods: {
    showPass() {
      if (this.eyeicon === "closed-eye") {
        this.eyeicon = "eye-o";
        this.passtype = "text";
      } else {
        this.eyeicon = "closed-eye";
        this.passtype = "password";
      }
    },
    loginCheck(value) {
      console.log("value", value);
      if (value.loginname == "" || value.password == "") {
        showFailToast("请输入完整信息");
        return;
      }
      this.$http({
        url: "/user/login",
        method: "post",
        data: value,
      }).then((res) => {
        if (res.data.code === "200") {
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("username", value.loginname);
          localStorage.setItem("userid", res.data.data.userid);
          localStorage.setItem("password", res.data.data.password);
          if (this.$route.query.path) {
            this.$router.push(this.$route.query.path);
          } else {
            this.$router.push("/Home");
          }
        }
      });
    },
    goReg() {
      this.$router.push("./Reg");
    },
  },
};
</script>
    
    <style scoped>
.gologin {
  display: flex;
  justify-content: end;
  margin-right: 20px;
  font-weight: 700;
}
</style>